<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换图片</title>
</head>
<body>
<button id="btn">切换图片</button>
<div id="div1" style="margin: 0 auto;width: 1000px;height: 500px">
    <img src="../img/1.jpg" style="width: 100%;height: 100%"/>
</div>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    var imgPaths = ['../img/1.jpg', '../img/2.jpg', '../img/3.jpg'];
    var i = 1;

    function fun1() {
        $('img:eq(0)').attr('src', imgPaths[i++]);
        if (i >= imgPaths.length) {
            i = 0;
        }
    }

    $(function () {
        //js 函数作为其他方法的参数，称为回调函数，写法
        //1.字符串+()
        setInterval('fun1()', 1000);
        //2.只写函数名
        $('#btn').click(fun1);
        //自己手动调用 js 函数
        fun1(1, 2, 3);
    })
</script>
</body>
</html>